<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <title>Bobo</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/handle.js"></script>
    <script src="js/csz.js"></script>
    <script type="text/javascript">
        function doTTS(ttsText) {
            var ttsDiv = document.getElementById('bdtts_div_id');
            var ttsAudio = document.getElementById('tts_autio_id');

            ttsDiv.removeChild(ttsAudio);
            var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
            var sss = '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=8&text=' + ttsText + '" type="audio/mpeg">';
            var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
            var au2 = '</audio>';
            ttsDiv.innerHTML = au1 + sss + eee + au2;
            ttsAudio = document.getElementById('tts_autio_id');
            ttsAudio.play();
        }
    </script>
</head>

<body>
    <canvas id="canvas"></canvas>
    <div id="window" style="display: none;">
        <label for="in">
            <div class="title">
                <!-- <img src="css/1.jpg"> -->
                <span id="title" style="margin-left: 12px;">Bobo</span>
            </div>
            <div id="bdtts_div_id">
                <audio id="tts_autio_id" autoplay="autoplay">
                    <source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=8&text=播报内容"
                        type="audio/mpeg">
                    <embed id="tts_embed_id" height="0" width="0" src="">
                </audio>
            </div>
            <div id="content">
                <div id="text-content">
                    <ul id="text">
                    </ul>
                    <ul>
                        <li>
                            <span id="in-prefix">&gt; </span>
                            <input type="text" name="" id='in'>
                        </li>
                    </ul>
                </div>
                <iframe style="display: none;" id="frame" src="" frameborder="0"></iframe>
            </div>
        </label>
    </div>
    <script>
        let ulDom = $("#text")
        let inDom = $("#in")
        let textContentDom = $("#text-content")
        let frameDom = $("#frame")
        let commandHistory = []
        let commandIndex = 0;
        $(document).ready(function () {
            $(document).keyup(function (event) {
                if (event.keyCode == 13) {
                    let command = inDom.val()
                    if (commandHistory[commandHistory.length - 1] != command) commandHistory.push(command)
                    commandIndex = 0;
                    handle(inDom.val())
                }
                else if (event.keyCode == 38) {
                    if (commandIndex == 0) commandIndex = commandHistory.length - 1;
                    else commandIndex--;
                    inDom.val(commandHistory[commandIndex])
                }
                else if (event.keyCode == 40) {
                    if (commandIndex == commandHistory.length - 1) commandIndex = 0;
                    else commandIndex++;
                    inDom.val(commandHistory[commandIndex])
                }
            });
            $("#content").click(() => {
                hideFrame()
            })
        });
        setTimeout(() => {
            $("#window").fadeIn(1000);
            inDom.focus();
        }, 2000)
    </script>
    <script src="js/background.js"></script>
</body>

</html>